<template>
	<view class="edit-phone">
		<NavBar title="更换手机号"/>
		<view class="content">
			<view class="title"> 更换后，可使用新手机号获取验证信息 </view>
			<view class="phone-yzm">
				<view class="item">
					<view class="label"> 手机号 </view>
					<view class="value"> 
						<input v-model="mobile" type="number" placeholder="请输入手机号" placeholder-style="color:#D8D8D8" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 验证码 </view>
					<view class="value"> 
						<input v-model="code" type="number" placeholder="请输入验证码" placeholder-style="color:#D8D8D8" />
						<YzmBtn :mobile="mobile" @getYzm="getYzm"/>
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn" @tap="submit"> 确认更换 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import NavBar from '@/components/NavBar.vue';
	import YzmBtn from '@/components/YzmBtn.vue';
	import { GetYzmApi, ChangePhoneApi } from '@/service/index.js'
	import { isValidPhone } from '@/utils/valdate.js'
	const code = ref('')
	const mobile = ref('')
	const getYzm = () => {
		let params = {
			type: 'modify',
			mobile: mobile.value
		}
		GetYzmApi(params).then(res => {
			console.log(res);
		})
	}
	const submit = () => {
		if(mobile.value == '') return getApp().globalData.toast('请输入手机号')
		if(!isValidPhone(mobile.value)) return getApp().globalData.toast('请输入正确的手机号')
		if(code.value == '') return getApp().globalData.toast('请输入验证码')
		let params = {
			type: 1,
			code: code.value,
			mobile: mobile.value,
		}
		ChangePhoneApi(params).then(res => {
			console.log(res);
		})
	}
</script>

<style scoped lang="scss">
	.edit-phone {
		.content {
			padding: 20px 12px;
			.title {
				color: #333333;
				font-size: 17px;
				font-weight: bold;
				line-height: 20px;
				margin-bottom: 20px;
			}
			.phone-yzm {
				padding: 0 12px;
				border-radius: 10px;
				background-color: #fff;
				box-sizing: border-box;
				.item {
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
					}
					.value {
            flex: 1;
						display: flex;
						align-items: center;
						input {
							color: #D8D8D8;
							font-size: 14px;
							font-weight: 400;
							text-align: right;
							margin-right: 5px;
						}
					}
				}
			}
			.btn-box {
				padding: 0 20px;
				margin-top: 20px;
				.btn {
					height: 40px;
					color: #FFFFFF;
					font-size: 17px;
					line-height: 40px;
					font-weight: bold;
					text-align: center;
					background: #FF3B1E;
					border-radius: 106px;
				}
			}
		}
	}
</style>
